<!-- 赞助播报横幅组件 -->
<template>
  <!-- 测试按钮 -->
  <view class="test-buttons" v-if="showTestButtons">
    <button class="test-btn" @tap="testBanner(0)">测试等级0</button>
    <button class="test-btn" @tap="testBanner(1)">测试等级1</button>
    <button class="test-btn" @tap="testBanner(2)">测试等级2</button>
    <button class="test-btn" @tap="testBanner(3)">测试等级3</button>
    <button class="test-btn" @tap="testBanner(4)">测试等级4</button>
    <button class="test-btn close" @tap="toggleTestButtons">关闭测试</button>
  </view>
  
  <!-- 测试开关按钮 -->
  <button class="test-toggle" @tap="toggleTestButtons" v-if="!showTestButtons">
    测试横幅
  </button>
  
  <!-- 简单测试按钮 -->
  <button class="simple-test" @tap="simpleTest" style="position: fixed; top: 60px; right: 20px; z-index: 100001; background: red; color: white; padding: 5px 10px; border-radius: 5px;">
    简单测试
  </button>
  
  <!-- 赞助横幅 -->
  <view v-if="showBanner" class="sponsor-banner" :class="bannerClass">
    <view class="banner-content">
      <view class="banner-icon">{{ bannerIcon }}</view>
      <view class="banner-text">
        <text class="banner-title">{{ bannerData.title }}</text>
        <text class="banner-desc">{{ bannerData.desc }}</text>
      </view>
      <button class="banner-close" @tap="closeBanner">×</button>
    </view>
    <view class="banner-effects">
      <view class="sparkle" v-for="n in sparkleCount" :key="n" :style="getSparkleStyle(n)"></view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const showBanner = ref(false)
const bannerData = ref({})
const bannerClass = ref('')
const bannerIcon = ref('🎉')
const sparkleCount = ref(0)
const showTestButtons = ref(false)
let autoCloseTimer = null

// 监听全局事件
onMounted(() => {
  console.log('🎉 SponsorBanner 组件已挂载，开始监听 sponsor-success 事件')
  console.log('🎉 组件挂载状态:', showBanner.value)
  console.log('🎉 当前页面路径:', window.location?.href || 'unknown')
  
  // 方式1: uni事件
  uni.$on('sponsor-success', handleSponsorSuccess)
  
  // 方式2: 全局事件监听
  if (typeof window !== 'undefined') {
    window.addEventListener('sponsor-success', (event) => {
      console.log('🎉 通过全局事件收到赞助消息:', event.detail)
      handleSponsorSuccess(event.detail)
    })
  }
  
  // 方式3: 定时检查（备用方案）
  const checkInterval = setInterval(() => {
    if (typeof window !== 'undefined' && window.__SPONSOR_MESSAGE__) {
      console.log('🎉 通过全局变量收到赞助消息:', window.__SPONSOR_MESSAGE__)
      handleSponsorSuccess(window.__SPONSOR_MESSAGE__)
      window.__SPONSOR_MESSAGE__ = null
    }
  }, 1000)
  
  // 清理定时器
  onUnmounted(() => {
    clearInterval(checkInterval)
  })
  
  // 暴露方法到全局，供main.ts直接调用
  if (typeof window !== 'undefined') {
    window.__SPONSOR_BANNER__ = {
      showSponsorBanner: showSponsorBanner
    }
    console.log('🎉 SponsorBanner组件已挂载并暴露到window.__SPONSOR_BANNER__')
  }
})

onUnmounted(() => {
  uni.$off('sponsor-success', handleSponsorSuccess)
  if (autoCloseTimer) {
    clearTimeout(autoCloseTimer)
  }
})

function handleSponsorSuccess(message) {
  console.log('🎉 SponsorBanner 收到赞助成功消息:', message)
  console.log('🎉 消息类型:', message.type)
  console.log('🎉 当前showBanner状态:', showBanner.value)
  
  if (message.type === 'sponsor_success') {
    console.log('🎉 开始显示赞助横幅')
    console.log('🎉 参数:', {
      amount: message.amount,
      sponsorName: message.sponsorName,
      sponsorType: message.sponsorType,
      level: message.level,
      avatarUrl: message.avatarUrl,
      duration: message.duration
    })
    
    showSponsorBanner(
      message.amount,
      message.sponsorName,
      message.sponsorType,
      message.level,
      message.avatarUrl,
      message.duration
    )
    
    console.log('🎉 showSponsorBanner调用完成，当前showBanner状态:', showBanner.value)
  } else {
    console.log('🎉 消息类型不匹配，忽略')
  }
}

function showSponsorBanner(amount, sponsorName, sponsorType, level, avatarUrl, duration) {
  console.log('=== 显示赞助播报横幅 ===')
  console.log('金额:', amount, '赞助者:', sponsorName, '类型:', sponsorType, '等级:', level)
  console.log('调用前showBanner状态:', showBanner.value)
  
  // 根据等级确定播报内容和效果
  const bannerInfo = getBannerInfo(level, amount, sponsorName, sponsorType)
  console.log('横幅信息:', bannerInfo)
  
  // 设置横幅数据
  bannerData.value = bannerInfo
  bannerClass.value = `level-${level}`
  bannerIcon.value = getBannerIcon(level)
  sparkleCount.value = level * 3 + 5 // 根据等级设置粒子数量
  
  console.log('设置横幅数据完成:', {
    bannerData: bannerData.value,
    bannerClass: bannerClass.value,
    bannerIcon: bannerIcon.value,
    sparkleCount: sparkleCount.value
  })
  
  // 显示横幅
  showBanner.value = true
  console.log('设置showBanner为true，当前状态:', showBanner.value)
  
  // 根据等级设置自动消失时间
  const autoCloseTime = duration || getAutoCloseTime(level)
  if (autoCloseTime > 0) {
    autoCloseTimer = setTimeout(() => {
      if (showBanner.value) {
        closeBanner()
      }
    }, autoCloseTime)
  }
  
  console.log('横幅等级:', level, '自动关闭时间:', autoCloseTime + 'ms')
}

function getBannerInfo(level, amount, sponsorName, sponsorType) {
  const levelConfigs = {
    0: { title: '感谢支持！', desc: `${sponsorName} 赞助了 ¥${amount}` },
    1: { title: '感谢支持！', desc: `${sponsorName} 赞助了 ¥${amount}` },
    2: { title: '慷慨赞助！', desc: `${sponsorName} 慷慨赞助了 ¥${amount}` },
    3: { title: '土豪赞助！', desc: `${sponsorName} 土豪赞助了 ¥${amount}` },
    4: { title: '大佬赞助！', desc: `${sponsorName} 大佬赞助了 ¥${amount}` },
    5: { title: '超级大佬！', desc: `${sponsorName} 超级大佬赞助了 ¥${amount}` }
  }
  
  const config = levelConfigs[level] || levelConfigs[0]
  return {
    title: config.title,
    desc: config.desc
  }
}

function getBannerIcon(level) {
  const icons = {
    0: '🎉',
    1: '🎉',
    2: '💎',
    3: '💰',
    4: '👑',
    5: '🌟'
  }
  return icons[level] || '🎉'
}

function getAutoCloseTime(level) {
  const timeConfigs = {
    0: 3000,  // 3秒
    1: 4000,  // 4秒
    2: 5000,  // 5秒
    3: 6000,  // 6秒
    4: 8000,  // 8秒
    5: 10000  // 10秒
  }
  return timeConfigs[level] || 3000
}

function getSparkleStyle(index) {
  const randomX = Math.random() * 100
  const randomY = Math.random() * 100
  const randomDelay = Math.random() * 2
  const randomSize = Math.random() * 4 + 2
  
  return {
    left: randomX + '%',
    top: randomY + '%',
    animationDelay: randomDelay + 's',
    width: randomSize + 'px',
    height: randomSize + 'px'
  }
}

function closeBanner() {
  showBanner.value = false
  if (autoCloseTimer) {
    clearTimeout(autoCloseTimer)
    autoCloseTimer = null
  }
  console.log('横幅已关闭')
}

// 测试按钮功能
function toggleTestButtons() {
  showTestButtons.value = !showTestButtons.value
  console.log('测试按钮状态:', showTestButtons.value)
}

function testBanner(level) {
  const testData = {
    0: { amount: 1, name: '小明', type: '个人' },
    1: { amount: 5, name: '小红', type: '个人' },
    2: { amount: 25, name: '小李', type: '企业' },
    3: { amount: 75, name: '王总', type: '企业' },
    4: { amount: 200, name: '大佬', type: '企业' }
  }
  
  const data = testData[level]
  console.log(`🎉 测试等级 ${level} 横幅`)
  
  showSponsorBanner(
    data.amount,
    data.name,
    data.type,
    level,
    '',
    5000
  )
}

// 简单测试方法
function simpleTest() {
  console.log('🎉 简单测试按钮被点击')
  console.log('🎉 当前showBanner状态:', showBanner.value)
  
  // 直接设置横幅显示
  showBanner.value = true
  bannerData.value = {
    title: '测试横幅',
    desc: '这是一个测试横幅'
  }
  bannerClass.value = 'level-1'
  bannerIcon.value = '🎉'
  sparkleCount.value = 5
  
  console.log('🎉 简单测试完成，showBanner状态:', showBanner.value)
}
</script>

<style scoped>
.sponsor-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: linear-gradient(135deg, #ff6b6b, #feca57);
  padding: 8px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  animation: slideDown 0.4s ease-out;
  border-radius: 0 0 12px 12px;
  margin: 0 8px;
  max-width: calc(100vw - 16px);
  width: 100%;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.banner-icon {
  font-size: 20px;
  margin-right: 10px;
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.banner-text {
  flex: 1;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.banner-title {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 1px;
  line-height: 1.2;
}

.banner-desc {
  display: block;
  font-size: 12px;
  opacity: 0.95;
  line-height: 1.2;
}

.banner-close {
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  transition: background 0.2s;
}

.banner-close:active {
  background: rgba(255, 255, 255, 0.4);
}

.banner-effects {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

.sparkle {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: sparkle 2s infinite;
  opacity: 0.8;
}

/* 等级样式 - 更精致的渐变 */
.level-0 {
  background: linear-gradient(135deg, #ff6b6b, #feca57);
  box-shadow: 0 2px 12px rgba(255, 107, 107, 0.2);
}

.level-1 {
  background: linear-gradient(135deg, #ff6b6b, #feca57);
  box-shadow: 0 2px 12px rgba(255, 107, 107, 0.2);
}

.level-2 {
  background: linear-gradient(135deg, #a8edea, #fed6e3);
  box-shadow: 0 2px 12px rgba(168, 237, 234, 0.25);
}

.level-3 {
  background: linear-gradient(135deg, #ffecd2, #fcb69f);
  box-shadow: 0 2px 12px rgba(252, 182, 159, 0.25);
}

.level-4 {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.3);
}

.level-5 {
  background: linear-gradient(135deg, #f093fb, #f5576c);
  box-shadow: 0 2px 12px rgba(240, 147, 251, 0.3);
  animation: rainbow 3s infinite;
}

/* 动画效果 - 更流畅 */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(-3px);
  }
}

@keyframes sparkle {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
}

/* 测试按钮样式 */
.test-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100000;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.test-buttons {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100000;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 120px;
}

.test-btn {
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.test-btn:hover {
  background: #357abd;
  transform: scale(1.05);
}

.test-btn.close {
  background: #ff6b6b;
}

.test-btn.close:hover {
  background: #ff5252;
}

@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 375px) {
  .sponsor-banner {
    padding: 6px 12px;
    margin: 0 4px;
    max-width: calc(100vw - 8px);
  }
  
  .banner-title {
    font-size: 13px;
  }
  
  .banner-desc {
    font-size: 11px;
  }
  
  .banner-icon {
    font-size: 18px;
    margin-right: 8px;
  }
  
  .banner-close {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
}
</style>
